<template>
  <div class="fee-manage-container">
    <div class="fee-manage-header">
      <h1>费用管理</h1>
      <div class="header-stats">
        <div class="stat-card">
          <span class="stat-icon">💰</span>
          <div class="stat-content">
            <h3>总费用</h3>
            <p>¥{{ totalAmount }}</p>
          </div>
        </div>
        <div class="stat-card">
          <span class="stat-icon">⏰</span>
          <div class="stat-content">
            <h3>待缴费用</h3>
            <p>¥{{ unpaidAmount }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="fee-filter-section">
      <div class="filter-container">
        <label for="statusFilter">费用状态:</label>
        <select v-model="statusFilter" @change="fetchFees" class="status-select">
          <option value="">全部</option>
          <option value="unpaid">未支付</option>
          <option value="paid">已支付</option>
          <option value="overdue">逾期</option>
        </select>
      </div>
    </div>

    <div class="fee-list-container">
      <transition-group name="fee-list" tag="div" class="fee-list">
        <div v-for="fee in filteredFees" :key="fee.feeId" class="fee-card" :class="{
          'fee-unpaid': fee.status === 'unpaid',
          'fee-paid': fee.status === 'paid',
          'fee-overdue': fee.status === 'overdue'
        }">
          <div class="fee-header">
            <h3>{{ getFeeTypeText(fee.feeType) }}</h3>
            <span class="fee-status">{{ getFeeStatusText(fee.status) }}</span>
          </div>
          <div class="fee-details">
            <div class="fee-amount">
              <span class="amount-label">应缴金额</span>
              <span class="amount-value">¥{{ fee.amount }}</span>
            </div>
            <div class="fee-dates">
              <div class="due-date">
                <span>到期日期</span>
                <p>{{ fee.dueDate }}</p>
              </div>
              <div class="paid-date">
                <span>支付日期</span>
                <p>{{ fee.paidDate || '未支付' }}</p>
              </div>
            </div>
          </div>
          <div class="fee-actions">
            <button v-if="fee.status === 'unpaid'" @click="payFee(fee)" class="pay-button">
              立即支付
            </button>
          </div>
        </div>
      </transition-group>
    </div>

    <!-- 支付模态框 -->
    <div v-if="selectedFee" class="payment-modal">
      <div class="modal-content">
        <h2>确认支付</h2>
        <p>费用类型：{{ getFeeTypeText(selectedFee.feeType) }}</p>
        <p>支付金额：¥{{ selectedFee.amount }}</p>
        <div class="modal-actions">
          <button @click="confirmPayment" class="confirm-button">确认支付</button>
          <button @click="selectedFee = null" class="cancel-button">取消</button>
        </div>
      </div>
    </div>

    <!-- 通知消息 -->
    <div v-if="error" class="notification error">{{ error }}</div>
    <div v-if="success" class="notification success">{{ success }}</div>
  </div>
</template>

<script>
export default {
  name: 'FeeManagePage',
  data() {
    return {
      fees: [],
      error: null,
      success: null,
      statusFilter: '',
      selectedFee: null,
      baseUrl: 'http://localhost:8080/api/fees',
      ownerId: JSON.parse(localStorage.getItem('user')).ownerId
    }
  },
  computed: {
    filteredFees() {
      if (!this.statusFilter) return this.fees;
      return this.fees.filter(fee => fee.status === this.statusFilter);
    },
    totalAmount() {
      return this.fees.reduce((sum, fee) => sum + fee.amount, 0).toFixed(2);
    },
    unpaidAmount() {
      return this.fees
        .filter(fee => fee.status === 'unpaid')
        .reduce((sum, fee) => sum + fee.amount, 0)
        .toFixed(2);
    }
  },
  methods: {
    async fetchFees() {
      try {
        const response = await fetch(`${this.baseUrl}/owner/${this.ownerId}`);
        if (!response.ok) throw new Error('获取费用信息失败');
        this.fees = await response.json();
      } catch (err) {
        this.error = err.message;
      }
    },
    payFee(fee) {
      this.selectedFee = fee;
    },
    async confirmPayment() {
      if (!this.selectedFee) return;

      try {
        const response = await fetch(`${this.baseUrl}/${this.selectedFee.feeId}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ ...this.selectedFee, status: 'paid' })
        });

        if (!response.ok) throw new Error('支付费用失败');

        this.success = '支付成功！';
        this.fetchFees();
        this.selectedFee = null;
      } catch (err) {
        this.error = err.message;
      }
    },
    getFeeStatusText(status) {
      const statusMap = {
        'unpaid': '未支付',
        'paid': '已支付',
        'overdue': '逾期'
      };
      return statusMap[status] || status;
    },
    getFeeTypeText(feeType) {
      const typeMap = {
        'water': '水费',
        'electricity': '电费',
        'gas': '燃气费',
        'property': '物业费',
        'heating': '取暖费',
        'lateWater': '水费滞纳费',
        'lateElectricity': '电费滞纳费',
        'lateProperty': '物业费滞纳费'
      };
      return typeMap[feeType] || feeType;
    }
  },
  created() {
    this.fetchFees();
  }
}
</script>

<style scoped>
.fee-manage-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--gray-light);
}

.fee-manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.fee-manage-header h1 {
  font-size: 2rem;
  color: var(--text-color);
}

.header-stats {
  display: flex;
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 2rem;
  margin-right: 15px;
}

.stat-content h3 {
  font-size: 0.9rem;
  color: var(--gray);
  margin-bottom: 5px;
}

.stat-content p {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
}

.fee-filter-section {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.status-select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--gray);
}

.fee-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.fee-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.fee-card:hover {
  transform: translateY(-5px);
}

.fee-unpaid {
  border-left: 4px solid #ff6b6b;
}

.fee-paid {
  border-left: 4px solid #4ecdc4;
}

.fee-overdue {
  border-left: 4px solid #ff9f1c;
}

.fee-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.fee-status {
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 4px;
}

.fee-unpaid .fee-status {
  background-color: #fff5f5;
  color: #ff6b6b;
}

.fee-paid .fee-status {
  background-color: #f0fdf4;
  color: #4ecdc4;
}

.fee-overdue .fee-status {
  background-color: #fffbea;
  color: #ff9f1c;
}

.fee-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.fee-amount {
  display: flex;
  flex-direction: column;
}

.amount-label {
  font-size: 0.8rem;
  color: var(--gray);
}

.amount-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
}

.fee-dates {
  display: flex;
  gap: 20px;
}

.due-date,
.paid-date {
  display: flex;
  flex-direction: column;
}

.fee-dates span {
  font-size: 0.8rem;
  color: var(--gray);
}

.fee-actions {
  text-align: right;
}

.pay-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pay-button:hover {
  background-color: var(--secondary-color);
}

.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.confirm-button,
.cancel-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.confirm-button {
  background-color: var(--primary-color);
  color: white;
}

.cancel-button {
  background-color: var(--gray-light);
  color: var(--text-color);
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 8px;
  z-index: 1100;
}

.error {
  background-color: #fff5f5;
  color: #ff6b6b;
}

.success {
  background-color: #f0fdf4;
  color: #4ecdc4;
}

/* 列表动画 */
.fee-list-enter-active,
.fee-list-leave-active {
  transition: all 0.5s ease;
}

.fee-list-enter-from,
.fee-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>